<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>演示：CSS3面包屑导航和多步骤指示</title>
<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
	<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
	<script src="js/modernizr.js"></script> <!-- Modernizr -->
<style type="text/css">
.demo{width:80%;margin:50px auto 10px auto;padding:10px;}
.demo p{line-height:30px;text-indent:2em}
.demo h3{font-size:24px;text-align:center;padding:10px}
@media (max-width: 480px){
	.demo{width:360px;margin:50px auto 10px auto;padding:10px;}
	.demo img{width:90%}
	.demo h3{font-size:1.5em;line-height:1.9em}
}

</style>
</head>

<body>
<div id="header">
   <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div>
   <div class="demo_topad"><script src="/js/ad_js/demo_topad.js" type="text/javascript"></script></div>
</div>

<div id="main">
   <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-347.html">CSS3面包屑导航和多步骤指示</a></h2>
   <div class="demo">
	<p>1、基本面包屑</p>
	<nav>
		<ol class="cd-breadcrumb">
			<li><a href="#0">首页</a></li>
			<li><a href="#0">开发</a></li>
			<li><a href="#0">Web</a></li>
			<li class="current"><em>技术热点</em></li>
		</ol>
	</nav>
	
	<p>2、自定义分隔符面包屑</p>
	<nav>
		<ol class="cd-breadcrumb custom-separator">
			<li><a href="#0">首页</a></li>
			<li><a href="#0">开发</a></li>
			<li><a href="#0">Web</a></li>
			<li class="current"><em>技术热点</em></li>
		</ol>
	</nav>
	<p>3、自定义图标面包屑</p>
	<nav>
		<ol class="cd-breadcrumb custom-separator custom-icons">
			<li><a href="#0">首页</a></li>
			<li><a href="#0">开发</a></li>
			<li><a href="#0">Web</a></li>
			<li class="current"><em>技术热点</em></li>
		</ol>
	</nav>
	<p>4、三角箭头面包屑</p>
	<nav>
		<ol class="cd-breadcrumb triangle">
			<li><a href="#0">首页</a></li>
			<li><a href="#0">开发</a></li>
			<li><a href="#0">Web</a></li>
			<li class="current"><em>技术热点</em></li>
		</ol>
	</nav>
	<p>5、三角箭头带图标面包屑</p>
	<nav>
		<ol class="cd-breadcrumb triangle custom-icons">
			<li><a href="#0">首页</a></li>
			<li><a href="#0">开发</a></li>
			<li><a href="#0">Web</a></li>
			<li class="current"><em>技术热点</em></li>
		</ol>
	</nav>
	<br/><div class="ad_76090"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br/>
	<p>6、基本分步指示</p>
	<nav>
		<ol class="cd-multi-steps text-center">
			<li class="visited"><a href="#0">购物车</a></li>
			<li class="visited" ><a href="#0">结算付款</a></li>
			<li class="current"><em>送货</em></li>
			<li><em>验货收货</em></li>
		</ol>
	</nav>
	<p>7、自定义图标分步指示</p>
	<nav>
		<ol class="cd-multi-steps text-center custom-icons">
			<li class="visited"><a href="#0">购物车</a></li>
			<li class="visited" ><a href="#0">结算付款</a></li>
			<li class="current"><em>送货</em></li>
			<li><em>验货收货</em></li>
		</ol>
	</nav>
	<p>8、圆点分步指示</p>
	<nav>
		<ol class="cd-multi-steps text-top">
			<li class="visited"><a href="#0">购物车</a></li>
			<li class="visited" ><a href="#0">结算付款</a></li>
			<li class="current"><em>送货</em></li>
			<li><em>验货收货</em></li>
		</ol>
	</nav>
	<p>9、带数字的圆点分步指示</p>
	<nav>
		<ol class="cd-multi-steps text-bottom count">
			<li class="visited"><a href="#0">购物车</a></li>
			<li class="visited" ><a href="#0">结算付款</a></li>
			<li class="current"><em>送货</em></li>
			<li><em>验货收货</em></li>
		</ol>
	</nav>
	
	</div>
	 
</div>

<div id="footer">
    <p>Powered by helloweba.com  允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p>
</div>
<p id="stat"><script type="text/javascript" src="/js/tongji.js"></script></p>
</body>
</html>